<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件注册</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_component">
        <p>1、用户自定义的全局组件<p>
        <p>组件的注册要在根实例初始化之前</p>
        <my-component></my-component>


        <p>2、用户自定义的局部组件</p>
        <p>通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用</p>
        <child-component></child-component>
    </div>

    <div id="app">
        <p>在其他作用于分别使用全局和局部定义的组件，看显示效果</p>
        <my-component></my-component>
        <child-component></child-component>
    </div>
    <script>
        //全局注册的组件
        Vue.component('my-component',{
            template:'<div>A custom component</div>'
        })


        var app_component = new Vue({
            el:'#app_component',
            //局部组件的注册
            components:{
                'child-component':{
                    template:'<div>A Custom child Component</div>'
                },
            }

        })




    </script>




</body>
</html>